<template>
  <div class="activityList">
    <!-- 搜索 -->
    <div class="section">
      <h3>活动列表</h3>
      <event-search
        @searchList="searchData"
        @showaddEventDialog="showaddEventDialog"
      ></event-search>
    </div>
    <!-- 表格 -->
    <el-table
      :height="tabHeight"
      border
      style="width: 99%"
      align="center"
      :data="tableData"
    >
      <el-table-column prop="id" label="ID" width="60"></el-table-column>
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="150"
      ></el-table-column>
      <el-table-column prop="activity_name" label="活动名称"></el-table-column>
      <el-table-column prop="game_name" label="关联游戏"></el-table-column>
      <el-table-column label="活动类型" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.type == 1">单日累充</span>
          <span v-else-if="scope.row.type == 2">多日累充</span>
          <span v-else-if="scope.row.type == 3">单笔充值</span>
          <span v-else-if="scope.row.type == 4">高额返利</span>
          <span v-else>其他类型</span>
        </template>
      </el-table-column>
      <el-table-column prop="cont" label="活动内容" width="70">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="showdetail(scope.row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="start_time" label="活动时间" width="220">
        <template slot-scope="scope">
          <span>{{ scope.row.start_time }}</span
          >~<span>{{ scope.row.end_time }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布状态" width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1" style="color: #ad720e"
            >待上线</span
          >
          <span v-if="scope.row.status == 2" style="color: #1c7231"
            >已上线</span
          >
          <span v-if="scope.row.status == 3" style="color: #be1a1d"
            >已下线</span
          >
        </template>
      </el-table-column>
      <el-table-column label="活动状态" width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.activity_status == 1" style="color: #ad720e"
            >未开始</span
          >
          <span v-if="scope.row.activity_status == 2" style="color: #1c7231"
            >进行中</span
          >
          <span v-if="scope.row.activity_status == 3" style="color: #be1a1d"
            >已结束</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="240"
        class="operateButton"
        v-if="this.role == 'editor'"
      >
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="clone(scope.row)"
            >克隆</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="edit(scope.row)"
            v-if="scope.row.status == 1"
            >编辑活动</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="online(scope.row)"
            v-if="scope.row.status == 1"
            >上线</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="offline(scope.row)"
            v-if="scope.row.status == 2"
            >下线</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="deleteEvent(scope.row)"
            v-if="scope.row.status == 1"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="240"
        class="operateButton"
        v-else-if="this.role == 'admin'"
      >
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="clone(scope.row)"
            >克隆</el-button
          >
          <el-button type="primary" plain size="mini" @click="edit(scope.row)"
            >编辑活动</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="online(scope.row)"
            v-if="scope.row.status != 2"
            >上线</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="offline(scope.row)"
            v-if="scope.row.status == 2"
            >下线</el-button
          >
          <el-button
            type="primary"
            plain
            size="mini"
            @click="deleteEvent(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="bottom">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pagenationData.currentPage"
        :page-size="pagenationData.pageSize"
        :total="pagenationData.pageTotal"
        background
        layout="prev, pager, next"
        prev-text="上一页"
        next-text="下一页"
      ></el-pagination>
    </div>
    <!-- 添加游戏 -->
    <addEvent
      v-if="addEventdialog.show"
      :isShow="addEventdialog.show"
      :dialogRow="addEventdialog.dialogRow"
      @closeDialog="hideaddEventDialog"
    ></addEvent>
    <!-- 编辑 -->
    <EditEvent
      v-if="editEventdialog.show"
      :isShow="editEventdialog.show"
      :dialogRow="editEventdialog.dialogRow"
      @closeDialog="hideeditEventDialog"
    ></EditEvent>
    <!-- 克隆 -->
    <CloneEvent
      v-if="cloneEventdialog.show"
      :isShow="cloneEventdialog.show"
      :dialogRow="cloneEventdialog.dialogRow"
      @closeDialog="hidecloneEventDialog"
    ></CloneEvent>
    <!-- 查看详情 -->
    <EventDetail
      v-if="eventDetaildialog.show"
      :isShow="eventDetaildialog.show"
      :dialogRow="eventDetaildialog.dialogRow"
      @closeDialog="hideEventDetaildialog"
    ></EventDetail>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import EventDetail from "./component/eventList/eventDetail";
import EventSearch from "./component/eventList/eventSearch";
import addEvent from "./component/eventList/addEvent";
import EditEvent from "./component/eventList/editEvent";
import CloneEvent from "./component/eventList/cloneEvent";

import {
  getEventList,
  operateEvent,
  activityDetail,
  editCopy,
} from "@/api/eventManage";

export default {
  inject: ["reload"],
  data() {
    return {
      tabHeight: window.innerHeight - 220,
      search: {},
      tableData: [],
      loading: false,
      role: "",
      eventDetaildialog: {
        show: false,
        dialogRow: {},
      },
      addEventdialog: {
        show: false,
        dialogRow: {},
      },
      cloneEventdialog: {
        show: false,
        dialogRow: {},
      },
      editEventdialog: {
        show: false,
        dialogRow: {},
      },
      pagenationData: {
        pageTotal: 0,
        currentPage: 1,
        pageSize: 20,
      },
      pageData: {
        page: 1,
        limit: 20,
      },
    };
  },
  components: {
    EventDetail,
    EventSearch,
    addEvent,
    EditEvent,
    CloneEvent,
  },

  mounted() {
    if (this.$store.getters.roles[0] == "admin") {
      this.role = "admin";
    } else {
      this.role = "editor";
    }
    this.getEventList();
  },
  methods: {
    searchData(search) {
      this.search = search;
      this.search.page = 1;
      this.pagenationData.currentPage = 1;
      this.searchList();
    },
    // 搜索数据
    searchList() {
      this.loading = true;
      const para = Object.assign({}, this.search);
      getEventList(para).then((res) => {
        this.loading = false;
        this.pagenationData.pageTotal = res.data.count;
        this.tableData = res.data.result;
      });
    },
    // 获取数据列表
    getEventList() {
      const para = Object.assign({}, this.pageData);
      getEventList(para).then((res) => {
        this.loading = false;
        this.pagenationData.pageTotal = res.data.count;
        this.tableData = res.data.result;
      });
    },
    // 上下分页
    handleCurrentChange(val) {
      this.pageData.page = val;
      this.search.page = val;
      this.searchList();
    },
    // 查看详情内容
    showdetail(row) {
      const para = Object.assign({}, { activity_id: row.id });
      activityDetail(para).then((res) => {
        if (res.data == null) {
          this.eventDetaildialog.dialogRow = [];
        } else {
          this.eventDetaildialog.dialogRow = res.data;
        }
        this.eventDetaildialog.show = true;
      });
    },
    hideEventDetaildialog() {
      this.eventDetaildialog.show = false;
    },
    // 上线
    online(row) {
      // 活动时间已经结束啦，是否确认上线
      var text = "";
      if (row.activity_status == 3) {
        text = "活动时间已经结束啦，是否确认上线";
      } else {
        text = "确认上线此活动?";
      }
      this.$confirm(text, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          const para = Object.assign({}, { activity_id: row.id, type: 1 });
          operateEvent(para).then((res) => {
            this.$message({
              type: "success",
              message: "上线成功",
            });
            setTimeout(() => {
              this.reload();
            }, 20);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消上线",
          });
        });
    },
    offline(row) {
      this.$confirm("确认下线此活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          const para = Object.assign({}, { activity_id: row.id, type: 2 });
          operateEvent(para).then((res) => {
            this.$message({
              type: "success",
              message: "下线成功",
            });
            setTimeout(() => {
              this.reload();
            }, 20);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消下线",
          });
        });
    },
    deleteEvent(row) {
      this.$confirm("确认删除此活动?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          const para = Object.assign({}, { activity_id: row.id, type: 3 });
          operateEvent(para).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            setTimeout(() => {
              this.reload();
            }, 20);
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    showaddEventDialog() {
      this.addEventdialog.show = true;
    },
    hideaddEventDialog() {
      this.addEventdialog.show = false;
    },
    hidecloneEventDialog() {
      this.cloneEventdialog.show = false;
    },
    hideeditEventDialog() {
      this.editEventdialog.show = false;
    },
    // 编辑活动
    edit(row) {
      editCopy({ activity_id: row.id }).then((res) => {
        this.editEventdialog.dialogRow = res.data;
        this.editEventdialog.show = true;
      });
    },
    // 克隆活动
    clone(row) {
      editCopy({ activity_id: row.id }).then((res) => {
        this.cloneEventdialog.show = true;
        this.cloneEventdialog.dialogRow = res.data;
      });
    },
  },
};
</script>
<style lang="scss">
.activityList {
  .section {
    justify-content: flex-start;
  }
  .linkgame {
    display: inline-block;
    width: 168px;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  .cell {
    .el-button--mini,
    .el-button--mini.is-round {
      padding: 5px 6px;
    }
  }
  .el-table__row td:last-child {
    .el-button + .el-button {
      margin-left: 4px;
    }
  }
}
</style>